<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">-->
    <!--<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>-->
    <!--<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>>-->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../jquery.mobile-1.4.5.min.css">
    <script src="../../jquery-2.2.3.js"></script>
    <script src="../../jquery.mobile-1.4.5.min.js"></script>
    <script src="../../jquery-easing.js"></script>
    <title>jquery-mobile</title>
</head>
<body>
<div data-role="page" id="page_1">
    <div data-role="header">
        <h3>标题 1</h3>
    </div>
    <div data-role="content">内容</div>
    <br/>
    <a href="#page_2" data-role="button">跳转至2</a>
    <br/>
    <a href="#page_3" data-rel="dialog">弹出页面3</a>
    <br/>
    <a href="#page_4" data-role="button" data-inline="true" data-transition="slidefade">transition页面4</a>
    <br/>
    <a href="#page_5" data-transition="turn">transition页面5</a>
    <br/>
    <a href="#page_6" data-transition="slide">transition页面6</a>
    <br/>
    <div data-role="footer">页脚</div>
</div>
<div data-role="page" id="page_2">
    <div data-role="header">标题2</div>
    <div data-role="content">
    <button>按钮</button></div>
    <a href="#page_1">跳转回1</a>
    <div data-role="footer" class="ui-btn">
        <a href="#" data-role="button" data-icon="home" data-rel="back" data-direction="reverse">首页</a>
        <a href="#" data-role="button" data-icon="search" data-rel="back" data-direction="reverse">搜索</a>
    </div>
</div>
<div data-role="page" id="page_3">
    <div data-role="header">
        <h3>弹出框</h3>
    </div>
    <div data-role="content">这是弹出内容3</div>

    <div data-role="footer" class="ui-btn">
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#" data-role="button" data-icon="home" data-rel="back" data-direction="reverse">首页</a>
            <a href="#" data-role="button" data-icon="search" data-rel="back" data-direction="reverse">搜索</a>
        </div>
    </div>
</div>
<div data-role="page" id="page_4">
    <div data-role="header">
        <a href="#" data-role="button" data-icon="home" data-rel="back" data-direction="reverse">首页</a>
        <h3>页面4</h3>
    </div>
    <a href="#page_1" data-transition="slide" data-direction="reverse">回页面1</a>
    <div data-role="content">
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#" data-role="button">button1</a>
            <a href="#" data-role="button">button1</a>
            <a href="#" data-role="button">button1</a>
        </div>
    </div>
    <div data-role="content">
        <div data-role="controlgroup" data-type="vertical">
            <a href="#" data-role="button">button1</a>
            <a href="#" data-role="button">button1</a>
            <a href="#" data-role="button">button1</a>
        </div>
    </div>
</div>
<div data-role="page" id="page_5">
    <div data-role="header">
        <h3>页面5</h3>
        <a href="#" data-role="button" data-icon="search" class="ui-btn-right" data-rel="back" data-direction="reverse">首页</a>
    </div>
    <a href="#" data-role="button" data-rel="back" data-icon="home">回页面1</a>
    <a href="#" data-role="button" data-rel="back" data-corners="false" data-inline="true">回页面1</a>
    <a href="#" data-role="button" data-rel="back" data-mini="true">回页面1</a>
    <a href="#" data-role="button" data-rel="back" data-icon="home" data-iconpos="right">回页面1</a>
    <a href="#" data-role="button" data-rel="back" data-icon="home" data-iconpos="notext">回页面1</a>
    <!--<a href="#page_1" data-transition="slide" data-direction="reverse">回页面1</a>-->
    <div data-role="content">这是内容5</div>
</div>
<div data-role="page" id="page_6">
    <div data-role="header" data-position="fixed">
        <h3>页面6</h3>
        <a href="#" data-role="button" data-icon="search" data-rel="back" data-direction="reverse">首页</a>
    </div>
    <div data-role="content">
        <p>
            很多字很多字很多字很多字很 <br/>多字很多字很多字很多字很 <br/>多字很多字很多 <br/>
            <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>多字很多字很多字很多字
        </p>
    </div>
    <div data-role="footer" data-position="fixed" data-fullscreen="true">
        <h3>页脚</h3>
    </div>
</div>
</body>
</html>